<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue初体验</title>
    <script>
        {
            "imports":{
                "vue":"http://lib.baomitu.com/vue/latest/vue.esm-browser.js";
            }
        }
    </script>
</head>
<body>
    <!-- Vue的挂载容器 -->
    <div id="app">
        <!-- 声明式的渲染 -->
        <!-- 文本插值 -->
        <h1>{{title}}</h1>
    </div>
    <script type="moudule">
        import { createApp } from 'vue';

        const root={
            //声明响应式数据
            data(){
                return {
                    msg:"hello Vue";
                }
            },
            //声明方法
            methods:{
                changeMsg(){
                    this.msg="Hello Vue 3.0";
                }
            },
            //声明生命周期函数
        mouted(){
            console.log('mounted');
        }
        };

        const app=createApp(root);

        app.mount('#app');
    </script>
</body>
</html>